<!-- 周期配置主页列表 -->
<!-- cycleConfPage -->
<template>
  <div class="app-container"
       v-loading.fullscreen.lock="allLoading"
       element-loading-text="拼命处理中,请耐心等待"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form @submit.native.prevent :model="mainTable.queryParams" ref="queryForm" size="small" :inline="true" v-show="mainTable.showSearch" label-width="68px">
      <el-form-item label="" prop="searchValue">
        <el-input
          v-model="mainTable.queryParams.searchValue"
          placeholder="搜索内容"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <SksTable :mainTable="mainTable" @refresh="getMainList">
      <template slot="top">
        <el-col :span="1.5">
          <el-button
            :disabled="mainTable.loading"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddAIConfig"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-view"
            size="mini"
            :disabled="!sksUtils.safeGet(mainTable,`currentRow.${mainTable.uniqueId}`)"
            @click="handleInfoAIConfig(mainTable.currentRow)"
          >预览</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="!sksUtils.safeGet(mainTable,`currentRow.${mainTable.uniqueId}`)"
            @click="handleEditAIConfig(mainTable.currentRow)"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="!sksUtils.safeGet(mainTable,`currentRow.${mainTable.uniqueId}`)"
            @click="handleDeleteAIConfig(mainTable.currentRow)"
          >删除</el-button>
        </el-col>
      </template>
      <template slot="default">
      </template>
      <template slot="none-config_name" slot-scope="{row,column,item,$index}">
        <el-button
          type="text"
          @click="handleInfoAIConfig(row)"
        >{{row[item.prop]}}</el-button>
      </template>
      <template slot="none-vOption" slot-scope="{row,column,$index}">
        <template v-if="sksUtils.isInArray(['ai.translateModel','ai.topicNamingModel','ai.defaultModel'],row.config_key)">
        <!--选择模型-->
          <el-button
            type="text"
            @click="handleSelectAIModel(row)"
          >选择模型</el-button>
        </template>
      </template>

    </SksTable>
    <AddAIConfigDialog ref="AddAIConfigDialogRef"></AddAIConfigDialog>
    <SelectConfigValueDialog ref="SelectConfigValueDialogRef" @ok="getMainList"/>
    <!--    调用 geMainList   -->
    <!--        <el-table-->
    <!--            :rowKey="mainTable.rowKey"-->
    <!--            :ref="mainTable.uuid"-->
    <!--            v-if="mainTable.showTable" v-loading="mainTable.loading" :data="mainTable.list"   @selection-change="handleSelectionChange"-->
    <!--            :highlight-current-row="true"-->
    <!--            @row-click="rowClickMainTable"-->
    <!--            :row-style="rowStyleElTable"-->
    <!--            :element-loading-text="mainTable.elementLoadingText"-->
    <!--            :default-expand-all="mainTable.defaultExpandAll"-->
    <!--        >-->
    <!--                <el-table-column type="selection" width="55" align="center" />-->
    <!--                <el-table-column type="index" label="序号" align="center"/>-->
    <!--                <el-table-column  label="人员ID" prop="personId" align="center"   />-->
    <!--                <el-table-column  label="描述" prop="description" align="center"   />-->
    <!--        </el-table>-->


  </div>
</template>

<script>
import { sksPageMixin } from 'sks-plugin-el-erp/lib/sks-page'
import { delAIConfig, listAIConfig } from '@/api/ai-config'
import AddAIConfigDialog from '@/views/ai-config/add-ai-config-dialog.vue'
import { delAIModel } from '@/api/ai'
import SelectConfigValueDialog from '@/views/ai-config/select-config-value-dialog.vue'

export default {
  name: "AiApiIndex",
  mixins: [
    sksPageMixin,
  ],
  components: {
    SelectConfigValueDialog,
    AddAIConfigDialog,
  },
  data() {
    return {
    };

  },
  methods: {
    initMainTableParam(){
      return {
        //业务名称,通常用业务表名
        ownerName: `ai_config`,
        uniqueId: 'id',

        //使用 tableColumnList 渲染
        tableColumnListEnable: true,
        //表列 会根据 sksAppName 自动查询后台配置
        tableColumnList:
          this.sksUtils.newTableColumnList([
            {
              visible: false,
              prop:'id',
              label: 'ID',
            },
            {
              prop:'config_name',
              label: '参数名称',
              htmlType: 'none'
            },
            {
              prop:'config_key',
              label: '参数键名',
            },
            {
              prop:'config_value',
              label: '参数键值',
            },
            {
              prop:'description',
              label: '描述',
            },
            {
              prop:'remark',
              label: '备注',
            },
            {
              prop:'vOption',
              label: '操作',
              htmlType: 'none'
            },
          ]),

        //使用 queryParamsColumnList 渲染
        queryParamsColumnListEnable: false,
        //搜索字段 会根据 sksAppName 自动查询后台配置
        queryParamsColumnList: [],
        queryParams:{
          searchValue: ''
        }

      }
    },
    resetQueryBefore(){
      this.resetForm("queryForm");
    },
    getMainList(){
      let queryParams = this.mainTable.queryParams;

      this.sksUtils.resetSksTableBefore(this.mainTable)

      listAIConfig(this.mainTable.queryParams).then(res=>{
        this.sksUtils.setSksTableDataByPage(this.mainTable,res)
      })

    },
    rowClickMainTable(row){
      this.mainTable.currentRow=row
      this.$emit('rowClickAfter',row)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.mainTable.selection=selection
      this.mainTable.ids = selection.map(item => item[this.mainTable.uniqueId]);
      this.mainTable.single = selection.length != 1;
      this.mainTable.multiple = !selection.length;
      this.$emit('selectionChangeAfter',selection)
    },
    handleAddAIConfig({data,title='新增'}={}){
      this.$refs.AddAIConfigDialogRef.show({
        form:this.sksUtils.mergeFromObject({},data,{
          status: this.dicts.baseEnumConstants.ENABLED,
          is_system: this.dicts.baseEnumConstants.NO,
          virtualChangeBitFlag: this.sksUtils.CHANGE_BIT_FLAG.add,
        }),
        dialogInfo:{
          title: title,
          submitCallbackSuccess:({resData}={})=>{
            this.getMainList();
          },
        }
      })
    },
    handleEditAIConfig(row){
      this.$refs.AddAIConfigDialogRef.showByUniqueId({
        uniqueId: row.id,
        dialogInfo: {
          title: '修改',
          submitCallbackSuccess:({resData}={})=>{
            this.getMainList();
          },
        },
        virtualChangeBitFlag: this.sksUtils.CHANGE_BIT_FLAG.modify,
      })
    },
    handleInfoAIConfig(row){
      this.$refs.AddAIConfigDialogRef.showByUniqueId({
        uniqueId: row.id,
        dialogInfo: {
          title: '查看'
        },
        virtualChangeBitFlag: this.sksUtils.CHANGE_BIT_FLAG.none,
      })
    },
    /** 删除按钮操作 */
    handleDeleteAIConfig(row) {
      const ids = row.id ? [row.id] : this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(() => {
        return delAIConfig(ids);
      }).then(() => {
        this.getMainList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    handleSelectAIModel(row){
      this.$refs.SelectConfigValueDialogRef.showByUniqueId({
        uniqueId: row.id,
        dialogInfo: {
          title: '选择模型'
        },
        virtualChangeBitFlag: this.sksUtils.CHANGE_BIT_FLAG.modify,
      })

    },
  },
};
</script>

<style>
/*//高亮点击的行*/
.el-table__body tr.current-row>td {
  //background: rgb(77, 195, 255, 0.5) !important;
  background-color: #DCDCDC !important;
  color: #000000;
}
/*//鼠标滑过时高亮行*/
.el-table__body tr:hover>td{
  //background: rgb(77, 195, 255, 0.2);
  background-color: #d7dcdc !important;
  //background: none;
}

.el-table__header-wrapper>table {
  border-collapse: collapse;
  /* margin: 1rem 0; */
  margin: 0px;
  display: block;
  overflow-x: auto;
}

.el-table__body-wrapper>table {
  border-collapse: collapse;
  /* margin: 1rem 0; */
  margin: 0px;
  display: block;
  overflow-x: auto;
}
</style>
